<template style="background:#f5f6fa;">
  <div class="typical-home" ref="portaletDiv">
    <a-row :gutter="[24,24]" class="module-list">
      <a-col :span="8">
        <div class="module-in module-in01">
          <a-page-header :ghost="false" title="技术选型">
          </a-page-header>
          <a-row :gutter="[24,24]">
            <a-col :span="12">
              <div class="technology">
                <a-list size="small" :split="false" :data-source="consoleTech">
                  <a-list-item slot="renderItem" slot-scope="item">
                    {{ item }}
                  </a-list-item>
                  <div slot="header">
                    后端
                  </div>
                </a-list>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="technology">
                <a-list size="small" :split="false" :data-source="frontTech" >
                  <a-list-item slot="renderItem" slot-scope="item" >
                    {{ item }}
                  </a-list-item>
                  <div slot="header">
                    前端
                  </div>
                </a-list>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="module-in module-in01 ">
          <a-page-header :ghost="false" title="联系部门-技术部">
          </a-page-header>
          <p>
            <a-alert message="处理事项" type="info" show-icon />
          </p>
          <a-list item-layout="horizontal" class="list-detail">
            <a-list-item class="module-text">
              <a-list-item-meta>
                <template slot="description">
                  <span>【1】</span>
                  <span>账号密码解锁</span>
                </template>
              </a-list-item-meta>
            </a-list-item>
            <a-list-item class="module-text">
              <a-list-item-meta>
                <template slot="description">
                  <span>【2】</span>
                  <span >平台错误上报</span>
                </template>
              </a-list-item-meta>
            </a-list-item>
            <a-list-item class="module-text">
              <a-list-item-meta>
                <template slot="description">
                  <span>【3】</span>
                  <span>新增需求</span>
                </template>
              </a-list-item-meta>
            </a-list-item>
            <a-list-item class="module-text">
              <a-list-item-meta>
                <template slot="description">
                  <span>【4】</span>
                  <span>其他运维事项</span>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </div>
      </a-col>
      <!-- 公告 -->
      <a-col :span="8" >
        <div class="module-in module-in07" style="height: 370px;">
          <a-page-header :ghost="false" title="公告">
            <template slot="extra">
              <a-icon type="more" @click="toNotice"/>
            </template>
          </a-page-header>
          <!-- 公告内容 -->
          <a-list item-layout="horizontal" :data-source="noticedata">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-list-item-meta>
                <a class="small-text" slot="description" @click="handleView(item)">【{{ item.noticeType === '1' ? '通知' : '公告' }}】  {{ item.noticeTitle }}</a>
              </a-list-item-meta>
            </a-list-item>
          </a-list>

          <notice-view-form
            v-if="showNoticeViewModal"
            ref="noticeViewForm"
            @ok="getNoticeList"
            @close="showNoticeViewModal = false"
          />
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<style lang="less" scoped>
body{
  .modlule-show{
    height: 240px;
    .ant-btn-lg {
      height: 40px;
      padding: 0 15px;
      font-size: 16px;
      border-radius: 4px;
    }
  }

  .small-text {
    font-size: 12px;
  }
}
</style>
<script>
  import { listUserNotice } from '@/api/system/notice'
  import NoticeViewForm from '@/views/system/notice/modules/NoticeViewForm'

  export default {
    data () {
      return {
        showNoticeViewModal: false,
        consoleTech: [
          'SpringBoot',
          'Spring Security',
          'JWT',
          'MyBatis',
          'Druid',
          'Fastjson'
        ],
        frontTech: [
          'Vue',
          'Vuex',
          'Ant-Design-VUE',
          'Axios',
          'Sass'
        ],
        noticedata: [],
        compile: false
      }
    },
    created () {
      this.getNoticeList()
    },
    watch: {
    },
    mounted () {
      this.$emit('setHeight', this.$refs.portaletDiv.offsetHeight)
    },
    components: {
      NoticeViewForm
    },
    methods: {
      getHeight () {
        return this.$refs.portaletDiv.offsetHeight
      },
      getNoticeList () {
        listUserNotice({ pageNum: 1, pageSize: 5 }).then(response => {
          this.noticedata = response.data.list
        })
      },
      toNotice () {
        this.$router.push({
          path: '/system/notice/NoticeReadIndex'
        })
      },
      handleView(record) {
        this.showNoticeViewModal = true
        this.$nextTick(() => (
          this.$refs.noticeViewForm.handleView(record)
        ))
      }
    }
  }
</script>
<style lang="less">
  @import '../typical-home.less';
</style>
